<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="edit.css" />
    <!-- 引入jQuery依赖 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <!-- 引入editor.md的依赖，路径不同，写法不同 -->
    <!-- 一个css 三个js -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

    <title>编辑页</title>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="病人.png" alt="病人" />
      <div class="title">我的博客系统</div>

      <div class="space"></div>

      <a href="博客列表页.html">主页</a>
      <a href="博客编辑页.html">写博客</a>
      <a href="博客登录页.html">退出登录状态</a>
    </div>
    <div class="blog-edit-container">
      <!-- 标题编辑区 -->
      <form action="博客列表页.html">
        <div class="title">
          <input type="text" id="text" />
          <input type="submit" id="submit" />
        </div>
        <!-- 创建一个id为editor的div id！-->
        <div id="editor"></div>
      </form>
    </div>
    <script>
      // editormd函数构造编辑器对象，参数则是编辑器元素的id，以及js对象，初始化量
      // 这一步重点在于默默帮你构建了对象！
      //其他属性在这里设置就行了，因为这里的优先级会更高！
      //由于不能有-号，所以圆角矩形不能在这里设置
      // 这个构造器，默认会溢出将滚动条给markdown编辑器！
      var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/",
      });
    </script>
  </body>
</html>
